import {globalData} from "./globalData/globalData.js";
import {clearElements, elements} from "./globalData/elements.js";
import {FANGAPI} from "./api/api.js";
import {isOnElement} from "./util/touchUtil.js";
import Room from "./room/room.js";
import {canvasUtil} from "./util/canvasUtil.js";
import {themeColor} from "./common/themeColor.js";
import {userInfo} from "./user.js";
import {imageCollection} from "./globalData/imageCollection.js";
import {createWebsocket} from "../adaptor/netConfig.js";






let roomNumber = 0
/**
 * 游戏主函数
 */
export default class Main {

    constructor() {
        this.restart()
    }

    async restart() {
        let res = await FANGAPI.login.login()
        console.log('登录返回的数据: ', res);
        userInfo.id = res.data.id
        userInfo.name = res.data.name
        createWebsocket(res.data.id)
        this.preLoadImg()

        const paramsStr = window.location.search
        const params = new URLSearchParams(paramsStr)
         roomNumber = parseInt(params.get('roomNumber'))

        if(roomNumber){
            //直接进入房间
            console.log('直接进入房间');
            setTimeout(async () => {
                clearElements()
                let room = new Room()
                globalData.room = room
                await room.joinRoom(roomNumber)
            },1000)

        }else {
            console.log('渲染主界面');
            this.render()
            canvasUtil.clearCanvas()

            globalData.canvas.addEventListener('touchstart', this.touchHandler)
        }







    }

    render(){
        console.log('渲染主界面');
        // debugger
        let input_x = 20,input_y=80
        // canvasUtil.drawRectElement(1, '房间输入框', input_x, input_y, 300, 50, themeColor.color1)
        // canvasUtil.drawButton(2, '加入房间', 20, 160, 120, 30, themeColor.color2,themeColor.color1)
        canvasUtil.drawButton(4, '新建房间', 20, 200, 120, 30, themeColor.color2,themeColor.color1)
        canvasUtil.drawText('v 0.0.10', globalData.screenWidth*0.45, globalData.screenHeight*0.9, themeColor.gray)
    }

    touchHandler = (e) => {
        e.preventDefault()


        const x = e.touches[0].clientX
        const y = e.touches[0].clientY
        console.log('touchstart main');

        if (isOnElement(x, y, elements.get(4))) {
            console.log('新建房间');

            globalData.canvas.removeEventListener('touchstart', this.touchHandler)
            clearElements()
            let room = new Room()
            globalData.room = room
            room.newRoom()
        }
    }

    preLoadImg(){
        this.loadImg('红车')
        this.loadImg('红马')
        this.loadImg('红炮')
        this.loadImg('相')
        this.loadImg('仕')
        this.loadImg('帅')
        this.loadImg('兵')
        this.loadImg('黑车')
        this.loadImg('黑马')
        this.loadImg('黑炮')
        this.loadImg('象')
        this.loadImg('士')
        this.loadImg('将')
        this.loadImg('卒')
        this.loadImg('star')
        this.loadImg('chessboard')
        this.loadImg('mina')
        this.loadImg('mountain')
        this.loadImg('wall')
        this.loadImg('water')
    }

    loadImg(name){
        let _this = this
        imageCollection[name].src = `images/${name}.png`
        imageCollection[name].onload = function (){
            // console.log(`${name}加载完成`);
            if(name==='chessboard' && !roomNumber){
                canvasUtil.clearCanvas()
                _this.render()
            }
        }
    }


}
